<template>
  <div>
    <el-select v-model="selectedType" placeholder="请选择商品类型" @change="handleTypeChange">
      <el-option v-for="type in types" :key="type.id" :label="type.name" :value="type.id"></el-option>
    </el-select>
    
    <template v-if="selectedType">
      <el-table :data="skuList">
        <el-table-column prop="spec" label="规格">
          <template #default="scope">
            <el-select v-model="scope.row.selectedSpecs" multiple>
              <el-option v-for="spec in scope.row.specOptions" :key="spec.id" :label="spec.name" :value="spec.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-button type="primary" @click="handleAddSpec">添加规格</el-button>
    </template>
    
    <el-button type="success" @click="handleCalculate">计算笛卡尔积</el-button>
    <div v-if="skuCombos && skuCombos.length > 0">
      <p>笛卡尔积:</p>
      <ul>
        <li v-for="combo in skuCombos" :key="combo"> {{ combo }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';

interface Type {
  id: string;
  name: string;
}

interface Spec {
  id: string;
  name: string;
}

interface Sku {
  spec: string[];
  price: number;
  specOptions: Spec[];
  selectedSpecs: string[];
}

const types: Type[] = [
  { id: '1', name: '类型1' },
  { id: '2', name: '类型2' },
];

const skuList: Sku[] = reactive([
  {
    spec: [],
    price: 0,
    specOptions: [],
    selectedSpecs: [],
  },
]);

const selectedType = ref<string>('');

const skuCombos = ref<string[]>([]);

function handleTypeChange() {
  // 根据选中的商品类型更新商品属性和规格选项
  if (selectedType.value === '1') {
    skuList[0].specOptions = [
      { id: '101', name: '颜色' },
      { id: '102', name: '尺寸' },
    ];
  } else if (selectedType.value === '2') {
    skuList[0].specOptions = [
      { id: '201', name: '款式' },
      { id: '202', name: '材质' },
    ];
  }
}

function handleAddSpec() {
  skuList.push({
    spec: [],
    price: 0,
    specOptions: [],
    selectedSpecs: [],
  });
}

function handleDelete(index: number) {
  skuList.splice(index, 1);
}

function handleCalculate() {
  // 根据规格选项计算笛卡尔积
  const selectedSpecs = skuList.map((sku) => sku.selectedSpecs);
  const result: string[] = [];
  if (selectedSpecs.length > 0) {
    const helper = (arr: string[][], idx: number, temp: string[]) => {
      if (idx === selectedSpecs.length) {
        result.push(temp.join(','));
        return;
      }
      for (let i = 0; i < arr[idx].length; i++) {
        temp[idx] = arr[idx][i];
        helper(arr, idx + 1, temp);
      }
    };
    helper(selectedSpecs, 0, []);
  }
  skuCombos.value = result;
}

onMounted(() => {
  handleTypeChange();
});
</script>
